<template>
  <div class="goods-view">
    <h1>商品列表</h1>
    <button @click="goBack" class="btn-back">返回数据视图</button>

    <div v-if="goods && goods.length > 0" class="goods-table-container">
      <table class="goods-table">
        <thead>
        <tr>
          <th>商品图片</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>库存</th>
          <th>普通佣金率</th>
          <th>活动佣金率</th>
          <th>销量</th>
          <th>团长</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in goods" :key="item.relateProductId">
          <td>
            <img :src="item.relateProductImg" alt="商品图片" class="goods-img" />
          </td>
          <td>{{ item.relateProductName || '未知商品' }}</td>
          <td>¥{{ (item.relateSpecLivePrice).toFixed(2) }}</td>
          <td>{{ item.relateGoodsStock / 10000 ?? 0 }}w</td>
          <td>{{ item.commissionMargin ?? 0 }}%</td>
          <td>{{ item.activityCommissionMargin ?? 0 }}%</td>
          <td>{{ item.relateSpecSellNum ?? 0 }}</td>
          <td>{{ item.partnerShopName || '未知团长' }}</td>
          <td>
            <a :href="item.linkUrl" target="_blank" class="btn-link">查看</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div v-else class="no-data">
      <p v-if="loading">正在加载数据...</p>
      <p v-else>暂无商品数据</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsView",
  data() {
    return {
      goods: [], // 初始化为空数组，防止 undefined 报错
      loading: true // 增加加载状态
    };
  },
  methods: {
    async fetchGoods() {
      try {
        const response = await fetch("http://127.0.0.1:5000/api/goods/get_goods");
        const result = await response.json();
        this.goods = result.goods || []; // 确保 goods 至少是一个空数组
      } catch (error) {
        console.error("获取商品数据失败:", error);
      } finally {
        this.loading = false;
      }
    },
    goBack() {
      this.$router.push("/");
    }
  },
  created() {
    this.fetchGoods();
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.goods-view {
  padding: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #f9f9fb;
  min-height: 100vh;
}

/* 返回按钮 */
.btn-back {
  background-color: #dc3545;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background-color 0.3s ease;
}

.btn-back:hover {
  background-color: #b02a37;
}

/* 表格容器 */
.goods-table-container {
  overflow-x: auto;
  margin: 0 auto;
  max-width: 1200px;
}

/* 商品表格 */
.goods-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* 表头 */
.goods-table th {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

/* 表格行 */
.goods-table tr {
  border-bottom: 1px solid #ddd;
}

/* 表格数据单元格 */
.goods-table td {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

/* 商品图片 */
.goods-img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

/* 购买链接按钮 */
.btn-link {
  background-color: #28a745;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.btn-link:hover {
  background-color: #218838;
}

/* 没有数据时 */
.no-data {
  font-size: 1.2em;
  color: #888;
  padding: 20px;
}
</style>
